<script setup>
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
import {
  closeCameraStream,
  openCameraStream,
} from '@/api/manager/dataManage/deviceManage.js'
import Player from 'xgplayer'
import HlsPlugin from 'xgplayer-hls'
import { ElMessage } from 'element-plus'
import { CaretRight } from '@element-plus/icons-vue'

const loading = ref(false)

const props = defineProps({
  item: Object,
  activeId: String,
})

let player

const afterOpened = (pkid) => {
  if (pkid) {
    loading.value = true
    openCameraStream(pkid)
      .then((res) => {
        if (res.success) {
          const url = `${window.VIDEO_BASE_URL}/hls/${pkid}/hls.m3u8`
          player = new Player({
            // el: document.querySelector('#live-video'),
            id: 'live-video' + pkid,
            url: url,
            width: '100%',
            height: '100%',
            autoplay: true,
            autoplayMuted: true,
            fitVideoSize: 'fixed',
            videoFillMode: 'contain',
            isLive: false,
            plugins: [HlsPlugin],
          })
        } else {
          ElMessage.error(res.message || '获取视频流失败')
        }
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }
}

const afterOpenedYsy = (pkid, hls) => {
  const url = hls
  player = new Player({
    // el: document.querySelector('#live-video'),
    id: 'live-video' + pkid,
    url: url,
    width: '100%',
    height: '100%',
    autoplay: true,
    autoplayMuted: true,
    fitVideoSize: 'fixed',
    videoFillMode: 'contain',
    isLive: false,
    plugins: [HlsPlugin],
  })
}

onMounted(() => {
  // afterOpened(props.item.id)
})

const close = () => {
  if (player) {
    try {
      player.destroy()
    } catch (error) {
      console.error('player destroy failed:', error)
    }
    player = null
  }
  if (props.item.id) {
    closeCameraStream(props.item.id)
  }
}

onBeforeUnmount(() => {
  close()
})

watch(
  () => props.activeId,
  (val) => {
    console.log(val)
    console.log(props.item.id)
    if (val === props.item.id) {
      props.item.hls
        ? afterOpenedYsy(props.item.id, props.item.hls)
        : afterOpened(props.item.id)
    } else {
      if (!props.item.id) return
      close()
    }
  },
)
</script>

<template>
  <div class="keynote-area-list-item-content-img">
    <!--            <img-->
    <!--              v-if="i.isWarn"-->
    <!--              class="warn-img"-->
    <!--              src="../../../../assets/imgs/ic_bj_area.png"-->
    <!--            />-->
    <!--            <img v-if="i.isWarn" :src="i.warn" class="warn" />-->
    <div
      :id="'live-video' + item.id"
      v-loading="loading"
      class="video-wrapper"
      style="width: 100%; height: 100%"
    >
      <!-- <img style="width: 100%; height: 100%" :src="azImg2" /> -->
    </div>
    <div v-if="item.isWarn" class="warn-black"></div>
    <div class="name"><span class="point"></span>{{ item.name }}</div>
    <el-icon v-show="activeId !== item.id" class="video-icon"
      ><CaretRight style="width: 32px; height: 32px"
    /></el-icon>
  </div>
</template>

<style lang="scss" scoped>
.keynote-area-list-item-content-img {
  width: 49%;
  height: 47%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  margin-top: 16px;

  .video-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 32px;
    height: 32px;
    z-index: 999;
    color: white;
  }

  .video-wrapper {
    background-image: url('@/assets/imgs/inspection_info_bg.png');
    background-size: 100% 100%;
  }

  .name {
    width: 100%;
    height: 24px;
    display: flex;
    align-items: center;
    background: rgba($color: #001d31, $alpha: 0.8);
    font-family: Source Han Sans SC;
    font-weight: 500;
    font-size: 12px;
    color: #ffffff;
    position: absolute;
    bottom: 0;

    .point {
      width: 7px;
      height: 7px;
      background: #21df95;
      border-radius: 50%;
      margin-left: 6px;
      margin-right: 6px;
    }
  }

  .warn-black {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba($color: #000000, $alpha: 0.45);
  }

  .warn-img {
    height: 64px;
    width: 64px;
    position: absolute;
    top: 13px;
    left: calc(50% - 32px);
    z-index: 1000;
  }

  .warn {
    width: 114px;
    height: 26px;
    position: absolute;
    top: 71px;
    left: calc(50% - 57px);
    z-index: 1000;
  }
}
</style>
